import { defineStore, acceptHMRUpdate } from 'pinia'
import { ref, shallowRef, computed } from 'vue'

export const useFabricStore = defineStore('fbric', () => {
  /**
   * @type {import('vue').ShallowRef<import('fabric').Canvas>}
   */
  const canvas = shallowRef(null)
  const setCanvas = (c) => {
    canvas.value = c
  }

  const boardWidth = ref(1920)
  const boardHeight = ref(1080)
  const setBoardSize = ({ w, h } = {}) => {
    if (w || w === 0) boardWidth.value = w
    if (h || h === 0) boardHeight.value = h
  }
  const customProps = ref(new Set())
  const customPropsArray = computed(() => Array.from(customProps.value))

  /**
   *
   * @param {...String[]} prop 导出JSON中需要保留的属性名
   */
  const addCustomProps = (...props) => {
    for (const prop of props) {
      customProps.value.add(prop)
    }
  }
  const removeCustomProps = (prop) => {
    customProps.value.delete(prop)
  }

  const editPanelVisible = ref(false)
  /**
   *
   * @param {Boolean} v
   */
  const setEditPanelVisible = (v) => {
    if (typeof v === 'boolean') editPanelVisible.value = v
  }

  return {
    boardWidth,
    boardHeight,
    canvas,
    setCanvas,
    setBoardSize,
    customProps,
    customPropsArray,
    addCustomProps,
    removeCustomProps,
    editPanelVisible,
    setEditPanelVisible,
  }
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useFabricStore, import.meta.hot))
}
